//顶部导航
#nav{
    background-color: #ffffff;
    z-index: 300;
    .center{
        height:74px;
        display: flex;
        align-items: center;
        .img{
            width:103px;
            height:74px;
            background:url('https://res.vmallres.com/portal/1.11.6.303/h5/images/logo_app.png');
            background-size: 103px;
        }
        .Navigation{
            width:1043px;
            line-height: 16px;
            div{
                width:808px;
                margin-left: 8px;
                display: flex;
                justify-content: flex-end;
                align-items: stretch;
                div{
                    font-size:16px;
                    color:rgb(0,0,0);
                    a{
                        &:hover{
                            color:red;
                          }
                    }
                }
            }
        }
        //需要给图片加点击事件
        .Shopping-cart{
            width:50px;
            height:26px;
            display: flex;
            justify-content: flex-end;
            background-color: #ffffff;
            img{
                width:26px;
                height:26px;
                &:hover{
                    cursor: pointer;
                }
            }
        }

    }
}
//遮罩层，需要在input上面写效果
.mask{
    width:100%;
    height:74px;
    background-color:#ffffff;
    position: absolute;
    top:36px;
    // opacity: .5;
    left:0px;
    display: none;
   
    div{
      width:640px;
      height:74px;
      margin: auto;
      overflow: hidden;
      div{
        width: 592px;
        height:36px;
        margin-top: 19px;
        border:1px solid black;
        border-radius: 18px;
        display: flex;
        .sp1{
                display:block;
                width:36px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                img{
                    width: 12px;
                    height:12px;
                }
        }
        input{
            width:514px;
            height:36px;
            border:none;
        }

        .sp2{
            display:block;
            width:36px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            &:hover{
                cursor: pointer;
            }
        }
      }
    }
    ul{
        width:592px;
        min-height: 48px;
    }
}
//我的商城
.Shopping{
    width:100%;
    height:64px;
    .center{
        height:64px;
        line-height: 64px;
    }
}
.name{
    width:100%;
    height:200px;
    .center{
        height:200px;
        background-color: rgb(226, 47, 77);
        .money{
            width:1000px;
            height:200px;
            padding: 0px 100px;
            display: flex;
            align-items: center;
           .pic{
            width:88px;
            height:88px;
            .iconfont{
                font-size: 88px;
                color: #ccc;
            }
           }
           .rig{
            width: 276px;
            height: 88px;
            font-size: 24px;
            a{
                color: #fff;
            }
           }
           .card{
                width: 616px;
                height: 52px;
                display: flex;
                justify-content: space-evenly;
                background-color: #fff;
                padding: 36px 32px;
                div{
                    width:150px;
                    height: 48px;
                    div{
                        width: 72px;
                        height:48px;
                        float: left;
                        p{
                            width: 72px;
                            height: 24px;
                            font-size: 18px;
                            color: #000000;
                            margin-bottom: 3px;
                        }
                        em{
                            width: 72px;
                            height: 21px; 
                            font-size: 16px;
                            color: rgb(207, 10, 44)
                        }
                    }
                    img{
                        width:48px;
                        height: 48px;
                        float: right;
                    }
                }
            }
        }
    }
}
.box1{
    margin-top: 20px;
   .center{
    height: 197px;
    background-color: #fff;
    overflow: hidden;
    .top{
        width:1152px;
        height:64px;
        line-height: 64px;
        margin: 12px 24px 0px;
        display: flex;
        justify-content: space-between;
       
        .left{
            width: 96px;
            height: 49px;
            font-size: 24px;
        }
       
    }
    .buttom{
        height: 143px;
        display: flex;
        justify-content: center;
        .box2{
           width:200px;
           height: 68px;
           margin-top: 24px;
           text-align: center;
           p{
            width: 48px;
            height: 48px;
            margin-left: 75px;
           }
           .iconfont{
            font-size: 40px;
        }
           span{
            font-size: 14px;
           }
        }
       }
   }

}
#link{
    .center{
        h1{
            margin-top: 30px;
            font-size: 32px;
            margin-bottom: 30px;
        }
        .link-ul{
            width: 1200px;
            height:100%;
            display: flex;
            flex-wrap: wrap;
            li{
                width: 285px;
                height: 387px;
                margin-top: 12px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
                margin-left: 12px;
                background-color: #fff;
                .pic{
                    width:280px;
                    height:250px;
                    img{
                        width:250px;
                        height:250px;
                       }
                }
                   .brief{
                    width: 285px;
                    height: 20px;
                    line-height: 20px;
                    font-size: 12px;
                    color: #b0b0b0;
                    text-align: center;
                    margin-top: 10px;
                    display: -webkit-box;
                    display: -moz-box;
                    white-space: pre-wrap;
                    word-wrap: break-word;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp:1;   /*显示行数*/      
                   }
                   .promotion{
                   width: 285px;
                   height:20px;
                   font-size: 16px;
                   text-align: center;
                   display: -webkit-box;
                   display: -moz-box;
                   white-space: pre-wrap;
                   word-wrap: break-word;
                   overflow: hidden;
                   text-overflow: ellipsis;
                   -webkit-box-orient: vertical;
                   -webkit-line-clamp:2;   
                   }
                   .price{
                    color:red;
                    margin-top: 10px;
                    font-weight: bold;
                    font-size: 18px;
                   }
                   a{
                    &:hover{
                        color: black;
                    }
                   }
                }
            }
    }
}
//返回顶部
.get-top{
    width: 80px;
    height: 80px;
    border: 1px solid;
    border-radius: 10px;
    position: fixed;
    right:15px;
    bottom: 30px;
    a{
        &:hover{
           color: black;
        }
        div{
            width: 80px;
            height: 56px;
            text-align: center;
            margin-top: 10px;
            .iconfont{
                font-size: 32px;
            }
        }
        p{
            text-align: center;
        }

    }
}

   
